<template>
    <div class="Contract">
        <div class="contract_top ">
            <span @click="$router.go(-1)"><div class="iconfont icon-zuo" style="color: #ffb001"></div></span>
        </div>
        <div class="contract_main" style="height: 100px;">
            <p>完善个人资料</p>
            <p v-if="errors.length" style="font-size: 15px; color:red; text-align: left;margin-top: 5px">
                <b>请填写以下内容:</b>
            <ul>
                <li v-for="error in errors">{{ error }}</li>
            </ul>
            </p>
        </div>
        <div class="contract_bottom ">
            <div class="cb_top ">

                <md-check-box
                        v-model="selected"
                        :options="options"
                >
                    <div slot="content" slot-scope="{ option }" class="payment-gateway">

                        <div v-if="option.value==1" class="iconfont icon-57"  style="font-size: 31px; padding: 0 0 0 22px; float: left;line-height: 40px"></div>
                        <div v-if="option.value==2" class="iconfont icon-87"  style="font-size: 31px; padding: 0 0 0 22px; float: left;line-height: 40px"></div>
                        <div class="cbt_message" style="font-size: 20px; width: 50px float: left; color: #e8e8e8; margin-left: 65px; line-height: 40px">
                            <template v-if="option.value==1" >先生</template>
                            <template v-if="option.value==2" >女士</template>
                        </div>
                    </div>
                </md-check-box>
            </div>
            <div class="cb_list ">


                <div class="cbl_1">
                    <input
                            placeholder="请输入您的名字"
                            v-model="xingming"
                    />
                </div>
                <div class="cbl_1">
                    <input   placeholder="请输入您的身份证号码" v-model="shenfenzhenghao"/>
                </div>
                <div class="cbl_2 ">
                    <div class="cbl_2list">身份证正面</div>
                    <div class="cbl_2list">身份证反面</div>
                </div>
                <div class="cbl_3">
                    <div class="cbl_3list" >
                        <div>
                            <img :src="zhenmian" alt=""  v-if="zhenmian">
                            <!--设置v-if让图标和图片一起显现,图标点击时设置事件令fanmian为零,达成图片删除效果-->
                            <md-icon
                                    v-if="zhenmian"
                                    class="image-reader-item-del"
                                    name="circle-cross"
                                    color="#666"
                                    style="position: absolute;
                                           width: 15px; height: 15px;
                                           border-radius: 15px; background-color: black;
                                           line-height: 15px;margin-left: -13px;
                                           color: #ddd"
                                    @click.native="zhenmian=''">
                            </md-icon>
                        </div>
                        <md-image-reader
                                name="reader0"
                                @select="onReaderSelect"
                                @complete="onReaderComplete"
                                @error="onReaderError"
                                is-multiple
                                v-if="!zhenmian"
                        ></md-image-reader>
                        <p v-if="!zhenmian">+</p>
                    </div>

                    <div class="cbl_3list" >
                        <div>
                            <img :src="fanmian" alt=""  v-if="fanmian">
                            <!--设置v-if让图标和图片一起显现,图标点击时设置事件令fanmian为零,达成图片删除效果-->
                            <md-icon
                                    v-if="fanmian"
                                    class="image-reader-item-del"
                                    name="circle-cross"
                                    color="#666"
                                    style="position: absolute;
                                           width: 15px; height: 15px;
                                           border-radius: 15px; background-color: black;
                                           line-height: 15px;margin-left: -13px;
                                           color: #ddd"
                                    @click.native="fanmian=''">
                            </md-icon>
                        </div>
                        <!--当fanmian存在时让它隐藏-->
                        <md-image-reader
                                name="reader1"
                                @select="onReaderSelect"
                                @complete="onReaderComplete1"
                                @error="onReaderError"
                                is-multiple
                                v-if="!fanmian"
                        ></md-image-reader>
                        <p v-if="!fanmian">+</p>
                    </div>

                </div>

            </div>
            <div class="cb_bottom ">
                <mt-button  @click.native="tijiao"  style="width: 100%; height: 100%; color: #ffffff; font-size: 20px;background-color: #ffb001"
                >提交</mt-button>
            </div>
        </div>

    </div>
</template>

<script>
import { CheckBox } from 'mand-mobile';
import { Icon, ImageReader, Toast } from 'mand-mobile';
import '@/css/contract.css';

export default {
  name: 'realname',
  describe: '',
  components: {
    [CheckBox.name]: CheckBox,
    [Icon.name]: Icon,
    [ImageReader.name]: ImageReader,
  },
  data() {
    return {
      errors: [],
      selected: '',
      xingming: '',
      shenfenzhenghao: '',
      zhenmian: '',
      fanmian: '',
      dx: '',
      index: '',
      options: [
        { value: '1' },
        { value: '2' },
      ],
      imageList: {
        reader0: [],
        reader1: [],
      },
    };
  },
  watch: {
    selected() {
      console.log(this.selected);
    },
    dx() {
      console.log(this.dx);
    },
  },
  methods: {
    onReaderSelect(name, { files }) {
      files.forEach((file) => {
        console.log('[Mand Mobile] ImageReader Selected:', `File Name ${file.name}`);
      });
      Toast.loading('图片读取中...');
    },
    async onReaderComplete(name, { dataUrl, file }) {
      const formData = new FormData();

      formData.append('file', file);
      if (file) {
        Toast.loading('上传中请等待');
        const res = await this.$api.post('/user/upload', formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        });
        // // 先判断是否成功
        if (res.data.url) {
          Toast.succeed('上传成功');
          console.log(res.data);
          this.zhenmian = res.data.url;
        } else {
          Toast.failed('上传失败');
        }
      }
    },
    async onReaderComplete1(name, { dataUrl, file }) {
      const formData = new FormData();

      formData.append('file', file);
      if (file) {
        Toast.loading('上传中请等待');
        const res = await this.$api.post('/user/upload', formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        });
        // 先判断是否成功
        if (res.data.url) {
          Toast.succeed('上传成功');
          this.fanmian = res.data.url;
          console.log(res.data);
        } else {
          Toast.failed('上传失败');
        }
      }
    },
    onReaderError(name, { msg }) {
      Toast.failed(msg);
    },
    // 点击提交信息
    async tijiao() {
      // 过滤数据
      if (!this.xingming) {
        Toast.failed('请填写您的名字');
        return false;
      }
      if (!this.shenfenzhenghao) {
        Toast.failed('请填写您的身份证号码');
        return false;
      }
      if (!this.zhenmian) {
        Toast.failed('请上传身份证正面照片');
        return false;
      }
      if (!this.fanmian) {
        Toast.failed('请上传身份证反面照片');
        return false;
      }
      const res = await this.$api.post('user/real', {
        uid: this.$store.state.userinfo.uid,
        real_name: this.xingming,
        idcard: this.shenfenzhenghao,
        idcard_first: this.zhenmian,
        idcard_last: this.fanmian,
      });

      if (res.data.state) {
        this.$store.commit('updatarname', this.xingming);/* 把真实姓名存到vuex */

        const _res = await this.$api.post('/user/getuserbyId', {
          uid: this.$store.state.userinfo.uid,
        });
        this.$store.state.userinfo.idcard = _res.data.data.idcard;
        this.$router.replace({
          name: 'realname_details',
        });
      } else {
        Toast.failed(res.data.info);
      }
    },
  },


};


</script>

<style lang="stylus" scoped>
    .Contract >>> .md-check-box{
        width: 100%;
        height: 40px;
        float: left;
        line-height: 40px;
        margin-left 0px;
        margin-right 0px;
    }
    .Contract >>> .md-check-box-col{
        height:40px;
        width:50%;
        float: left;
        line-height 0px;
        padding 0px

    }
    .Contract >>> .md-check-box-item{
        height 40px;
        width 100%;
        float left;
        font-size :12px;
        line-height 0px;
        text-align left;
        padding 0px
    }
    .Contract >>> .payment-gateway{
        height 40px;
        width 100%
    }
    .Contract >>>.md-image-reader-file{
        left 0;
    }
    .Contract >>> .md-check-box .md-check-box-item.is-selected{
        color :#ffb001;
        border-color #ffb001;
        background-color #ffffff
    }


</style>
